<template>
  <div>
    <Headline headline1="系统管理  /  " headline2="功能菜单" />
    <a-card style="width: 100%">
      <a-alert message="只能选择一二级菜单添加节点" banner closable />
      <!-- 选择框 -->
      <div class="menus">
        <span class="menus-title">选择菜单</span>
        <a-tree-select
          v-model="value"
          show-search
          style="width: 25%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          tree-default-expand-all
        >
          <a-tree-select-node
            v-for="item in items"
            :key="item.key"
            :value="item.title"
            :title="item.title"
          >
            <a-tree-select-node
              v-for="int in item.children"
              :key="int.key"
              :value="int.title"
              :title="int.title"
            >
              <!-- <a-tree-select-node
                v-for="ints in int.children"
                :selectable="false"
                :key="ints.key"
                :value="ints.title"
                :title="ints.title"
              >
              </a-tree-select-node> -->
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>
      </div>
      <div id="components-table-demo-size">
        <h4>菜单展示栏</h4>
        <a-table :columns="columns" :data-source="datas" bordered>
          <div slot="tags" slot-scope="text, tags, i">
            <a-button
              type="primary"
              class="btn"
              icon="plus"
              size="large"
              @click="edit(text, tags, i)"
              >新建</a-button
            >
            <a-button
              type="primary"
              class="btn"
              icon="diff"
              size="large"
              @click="edit(text, tags, i)"
              >编辑</a-button
            >
            <a-button
              type="danger"
              class="btn"
              icon="delete"
              size="large"
              @click="showModal()"
              >删除</a-button
            >
          </div>
        </a-table>
      </div>
    </a-card>
    <a-drawer
      title="新建"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="onClose"
      :width="720"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="名称">
          <a-input
            v-decorator="[
              'note',
              {
                rules: [{ required: true, message: 'Please input your note!' }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="系统序号">
          <a-input
            v-decorator="[
              'note',
              {
                rules: [{ required: true, message: 'Please input your note!' }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="btnadd" html-type="submit">
            确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
    <!-- 删除按钮提示框 -->
    <a-modal
      title="删除"
  :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      :visible="visibles"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>是否确定删除</p>
    </a-modal>
  </div>
</template>

<script>
import Headline from "../../../components/Headline.vue";
export default {
  name: "Homeuser",
  components: {
    Headline,
  },
  data() {
    return {
      value: "",
      visible: false,
      visibles: false,
      confirmLoading: false,
      items: [
        {
          key: "sub1",
          title: "用户中心",
          icon: "team",
          children: [
            {
              key: "sub1-1",
              title: "收藏菜单",
              children: [
                {
                  title: "用户管理",
                  path: "/user",
                  key: "sub1-1-1",
                },
                {
                  key: "sub1-1-2",
                  path: "/impower",
                  title: "角色授权",
                },
                {
                  key: "sub1-1-3",
                  path: "/menu",
                  title: "功能菜单",
                },
              ],
            },
          ],
        },
        {
          key: "sub2",
          title: "客户管理",
          icon: "solution",
          children: [{ title: "客户信息", key: "sub2-1" }],
        },
        {
          key: "sub3",
          title: "人事管理",
          icon: "usergroup-add",
          children: [
            {
              key: "sub3-1",
              title: "组织架构",
              children: [
                {
                  title: "单位部门",
                  path: "/unit",
                  key: "sub3-1-1",
                },
                {
                  key: "sub3-1-2",
                  path: "/ages",
                  title: "年纪和班级",
                },
                {
                  key: "sub3-1-3",
                  path: "/major",
                  title: "专业与班级",
                },
              ],
            },
            {
              key: "sub3-2",
              title: "人员信息",
              children: [
                {
                  title: "学生信息",
                  path: "/pupil",
                  key: "sub3-2-1",
                },
                {
                  key: "sub3-2-2",
                  path: "/staff",
                  title: "员工信息",
                },
              ],
            },
          ],
        },
        {
          key: "sub4",
          title: "设备中心",
          icon: "desktop",
          children: [
            {
              key: "sub4-1",
              title: "设备区域",
              children: [
                {
                  title: "区域和楼宇",
                  path: "/area",
                  key: "sub4-1-1",
                },
                {
                  key: "sub4-1-2",
                  path: "/rooms",
                  title: "房间设置",
                },
              ],
            },
            {
              key: "sub4-2",
              title: "设备管理",
              children: [
                {
                  title: "控制器及设备",
                  path: "/controller",
                  key: "sub4-2-1",
                },
                {
                  key: "spub4-2-2",
                  path: "/guards",
                  title: "门禁及通道闸",
                },
              ],
            },
          ],
        },
        {
          key: "sub5",
          title: "证卡管理",
          icon: "calendar",
          children: [
            { title: "证卡操作", key: "sub5-1", path: "/cardoper" },
            { title: "证卡黑名单", key: "sub5-2", path: "/cardblack" },
          ],
        },
        {
          key: "sub6",
          title: "人脸识别",
          icon: "smile",
          children: [
            {
              key: "sub6-1",
              title: "时段方案",
            },
            {
              key: "sub6-2",
              title: "周计划",
            },
            {
              key: "sub6-3",
              title: "人脸管理",
              children: [
                {
                  title: "人脸建模",
                  path: "/modeling",
                  key: "sub6-3-1",
                },
                {
                  key: "sub6-3-2",
                  path: "/accre",
                  title: "人脸授权",
                },
              ],
            },
            {
              key: "sub6-4",
              title: "权限组",
              children: [
                {
                  title: "权限组管理",
                  path: "/jurisd",
                  key: "sub6-4-1",
                },
                {
                  key: "sub6-4-2",
                  path: "/jurisdset",
                  title: "权限组设置",
                },
                {
                  key: "sub6-4-3",
                  path: "/jurisdworker",
                  title: "权限组绑定人员",
                },
              ],
            },
            {
              key: "sub6-5",
              title: "数据分析",
              children: [
                {
                  title: "识别记录",
                  path: "/discern",
                  key: "sub6-5-1",
                },
                {
                  key: "sub6-5-2",
                  path: "/current",
                  title: "通行记录",
                },
                {
                  key: "sub6-5-3",
                  path: "/leavesch ",
                  title: "在离校情况分析",
                },
                {
                  key: "sub6-5-4",
                  path: "/comes",
                  title: "出入学校统计",
                },
              ],
            },
          ],
        },
        {
          key: "sub7",
          title: "消息应用",
          icon: "message",
          children: [
            {
              key: "sub7-1",
              title: "微信应用",
              children: [
                {
                  title: "微信用户",
                  path: "/user",
                  key: "sub7-1-1",
                },
                {
                  key: "sub7-1-2",
                  path: "/impower",
                  title: "消息模板",
                },
                {
                  key: "sub7-1-3",
                  path: "/menu",
                  title: "推送记录",
                },
              ],
            },
          ],
        },
        {
          key: "sub8",
          title: "系统管理",
          icon: "setting",
          children: [
            {
              key: "sub8-1",
              title: "参数设置",
            },
            {
              key: "sub8-2",
              title: "客户用户管理",
            },
            {
              key: "sub8-3",
              title: "权限管理",
              children: [
                {
                  key: "sub8-3-1",
                  path: "/impower",
                  title: "区域授权",
                },
                {
                  key: "sub8-3-2",
                  path: "/menu",
                  title: "组织授权",
                },
              ],
            },
            {
              key: "sub8-4",
              title: "数字字典",
            },
          ],
        },
      ],
      columns: [
        {
          title: "id",
          dataIndex: "name",
        },
        {
          title: "子菜单名称",
          dataIndex: "age",
        },
        {
          title: "操作",
          key: "tags",
          dataIndex: "address",
          scopedSlots: { customRender: "tags" },
        },
      ],
      datas: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
        },
      ],
    };
  },
  methods: {
    edit(text, tags, i) {
      console.log(text, tags, i);
      this.visible = true;
    },

    onClose() {
      this.visible = false;
    },
    showModal() {
      this.visibles = true;
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visibles = false;
    },
    handleOk() {
      this.visibles = false;
    },
    btnadd() {
      this.visible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.menus {
  display: flex;
  margin: 30px 0;
  height: 30px;
  line-height: 30px;
}
.menus .menus-title {
  margin-right: 20px;
}
.ant-btn {
  margin: 0 10px !important;
}
.btn {
  width: 73px;
  font-size: 10px;
  margin-left: 10px;
  height: 32px;
}
/deep/ .ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 4px !important;
  overflow-wrap: break-word;
}
</style>